<template>
    <main-layout title="凌动智能采购系统">

      <div class="char-list">
        <div ref="lineChartNode" class="chart-box"></div>
      </div>
       <div class="char-list">
        <div ref="peiChartNode"  class="chart-box"></div>
      </div>

      <div class="func-box" v-for="item in funcList" :key="item.name">
        <span class="title">{{item.name}}</span>
        <div class="box">
          <div class="item" v-for="it in item.children" :key="it.name">
            <i @click="toPage(it)" :class="['icon', it.icon]"></i>
            <span class="text">{{it.name}}</span>
          </div>
        </div>
      </div>
    </main-layout>
</template>

<script>
import echarts from 'echarts'
import LineChart from './lineChart'
import PieChart from './pieChart'
import { collectionApi, paymentApi } from '../../apis/homeApi'
export default {
  mixins: [LineChart, PieChart],
  data () {
    return {
      funcList: [
        {
          name: '基础数据',
          children: [
            { id: '', icon: 'product-list', name: '材料管理', right: 'R', path: '' },
            { id: '', icon: 'product-new', name: '新建材料', right: 'C', path: '' },
            { id: '', icon: 'supplier-list', name: '供应商管理', right: 'R', path: '' },
            { id: '', icon: 'supplier-new', name: '新建供应商', right: 'C', path: '' }
          ]
        },
        {
          name: '项目管理',
          children: [
            { id: 'PROJECT-01-01', icon: 'project-list', name: '项目管理', right: 'R', path: '/project/list' },
            { id: 'PROJECT-01-02', icon: 'project-new', name: '新建项目', right: 'C', path: '/project/edit' }
          ]
        },
        {
          name: '采购管理',
          children: [
            { id: 'PURCHASE-01-01', icon: 'purchase-list', name: '采购管理', right: 'R', path: '/purchase/list' },
            { id: 'PURCHASE-01-02', icon: 'purchase-new', name: '新建采购', right: 'C', path: '/purchase/edit' }
          ]
        },
        {
          name: '收货管理',
          children: [
            { id: '', icon: 'receive-list', name: '收货管理', right: 'R', path: '' },
            { id: '', icon: 'receive-new', name: '新建收货', right: 'C', path: '' }
          ]
        },
        { name: '系统管理', children: [{ icon: 'setting', name: '设置', path: '/setting' }] }
      ]
    }
  },
  // 根据计算属性来获取vuex中的权限数据
  computed: {
    myRights () {
      return this.$store.getters['common/userRights']
    }
  },

  mounted () {
    // echarts的第一个方法(init接口)，它用于初始化echarts实例
    this.lineChart = echarts.init(this.$refs.lineChartNode)
    // 获取数据，然后在数据获取成功以后，再执行数据可视化渲染
    this.getLineData()

    // 实例化饼图echarts
    this.pieChart = echarts.init(this.$refs.peiChartNode)
    // 获取piechart的数据
    this.getPieData()
  },

  methods: {
    // 获取折线图数据
    async getLineData () {
      const result = await collectionApi()
      if (result.code === 200) this.renderLineChart(result.data)
    },
    async getPieData () {
      const result = await paymentApi()
      if (result.code === 200) this.renderPieChart(result.data)
    },

    // 点击图标，跳转到对应的页面
    toPage (route) {
      // 判断route是否有完整的路由参数
      if (!route.path) {
        this.$toast.fail('正在开发，敬请期待...')
        return
      }
      // 判断是否需要权限拦截，不需要就直接跳转
      if (!route.right) {
        this.$router.push(route.path)
        return
      }
      // 通过当前菜单的编码找到对应的权限，再判断权限是否具备
      const myRight = this.myRights.find(it => it.id === route.id)
      if (myRight && myRight.role.includes(route.right)) {
        this.$router.push(route.path)
      } else {
        this.$toast.fail('暂无访问权限，请联系管理员。。')
      }
    }
  },
  beforeDestroy () {
    if (this.timer) clearTimeout(this.timer)
  }
}
</script>

<style lang="less" scoped>
 @import "./index.less";
</style>
